<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>缴费项目</title>
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css" type="text/css">
    <style>
        .layui-table-cell {
            height: 100%;
            max-width: 100%;
        }
    </style>
<!--    解决layui复选框不居中显示的bug-->
    <style type="text/css">
        .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>


<div class="layui-col-xs10">
    <button type="button" class="layui-btn layui-btn-normal" id="addBtn">
        <i class="layui-icon">&#xe608;</i> 添加
    </button>
    <table id="payProjectTable" lay-filter="payProjectTable" ></table>
</div>



<!--添加-->
<form id="addForm" class="layui-form" style="display:none;padding:10px 20px 0px 0px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->

    <div class="layui-form-item">
        <label class="layui-form-label">项目名</label>
        <div class="layui-input-block">
            <input type="text" name="projectName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">收费金额</label>
        <div class="layui-input-block">
            <input type="text" name="projectMoney" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">创建时间</label>
        <div class="layui-input-block">
            <input type="text" name="createTime" class="layui-input" id="addDate">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">类别</label>
        <div class="layui-input-block">
            <select name="type" >
                <option value="">请选择一个类别</option>
                <option value="1">活动</option>
                <option value="2">基建</option>
                <option value="3">其他</option>
            </select>
        </div>
    </div>



    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addPayProject">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>

<!--修改-->
<form id="updateForm" lay-filter="updateForm" class="layui-form" style="display:none;padding:10px 20px 0px 0px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->

    <div class="layui-form-item">
        <label class="layui-form-label">用户ID</label>
        <div class="layui-input-block">
            <input type="hidden" name="id" lay-verify="number" placeholder="请输入" autocomplete="off" class="layui-input" >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">项目名</label>
        <div class="layui-input-block">
            <input type="text" name="projectName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">收费金额</label>
        <div class="layui-input-block">
            <input type="text" name="projectMoney" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">创建时间</label>
        <div class="layui-input-block">
            <input type="text" name="createTime" class="layui-input" id="updateDate">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">类别</label>
        <div class="layui-input-block">
            <select name="type" >
                <option value="">请选择一个类别</option>
                <option value="1">活动</option>
                <option value="2">基建</option>
                <option value="3">其他</option>
            </select>
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updatePayProject">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>


<script type="text/javascript">
    $(window).on('load',function() {
        let item = localStorage.getItem("code");
        if (item != 0) {
            window.location.href = "/login.jsp"
        }
    });
    layui.use(["table","form","upload","layer","tree","laydate"],function() {
        var table = layui.table;
        var form = layui.form;
        var upload = layui.upload;
        var layer = layui.layer;
        var tree = layui.tree;
        var laydate=layui.laydate;

        //渲染table表格=====开始
        table.render({
            elem: '#payProjectTable'
            ,url: 'http://localhost:8888/hy-pay-project/showAllPayProject' //数据接口
            ,page: true //开启分页
            ,limit:5
            ,limits:[5,8,12]
            ,cols: [[ //表头
                {field: 'id', title: '编号' }
                ,{field: 'projectName', title: '项目名'}
                ,{field: 'projectMoney', title: '收费金额'}
                ,{field: 'createTime', title: '创建时间'}
                ,{field: 'type', title: '类别',
                    templet:function(d){
                        if(d.type==1){
                            return "活动";
                        }
                        if(d.type==2){
                            return "基建";
                        }
                        if(d.type==3){
                            return "其他";
                        }
                    }
                }
                ,{title:"操作", width:300, align:'center', toolbar: '#barDemo'}
            ]]
        });
        //渲染table表格=====结束//给添加按钮增加弹出层---开始
        $("#addBtn").click(function(){
            layer.open({
                type:1,
                offset: 't',
                title:"添加新住户",
                content:$("#addForm")
            });
        });
        //给添加按钮增加弹出层---结束

        //给添加员工表单增加监听事件---开始
        form.on("submit(addPayProject)", function(data){
            //发出ajax请求，往数据库里面存储数据---开始
            $.ajax({
                url:"http://localhost:8888/hy-pay-project/addPayProject",
                data:data.field,
                dataType:"json",
                type:"post",
                success:function(res){
                    if(res.code==0){
                        //关闭弹出层
                        layer.closeAll();
                        layer.msg("添加成功！");
                        //刷新table表格
                        table.reload("payProjectTable");
                        $("#addForm").css("display","none");

                    }
                }
            });
            //发出ajax请求，往数据库里面存储数据---结束
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        //给添加员工表单增加监听事件---结束

        /*监听table表格上面的操作按钮====开始*/

        table.on("tool(payProjectTable)",function (obj) {
            var data = obj.data;
            console.log(data)
            var layEvent = obj.event;
            if(layEvent === 'del'){
                //调用confirm方法
                layer.confirm('是否确认删除？',function (ss) {
                    //发出ajax请求
                    $.ajax({
                        url: "http://localhost:8888/hy-pay-project/deletePayProject",
                        data: "id="+data.id,
                        dataType: "json",
                        success: function (uyg) {
                            //提示删除成功，刷新table表格
                            layer.msg("删除成功");
                            table.reload("payProjectTable");
                        }
                    });
                    layer.close(ss);
                });
            }else if(layEvent === 'edit') {
                //1.根据data获取到数据
                //2.把数据回显到修改的form表单中
                form.val("updateForm",data);
                //把from表单放入弹出层中显示出来
                layer.open({
                    type:1,
                    offset: 't',
                    title:"修改住户信息",
                    content:$("#updateForm")
                });
            }
        })

        /*监听table表格上面的操作按钮====结束*/

        //监听修改form的提交按钮===开始
        form.on('submit(updatePayProject)', function(data){
            //发出ajax请求，往数据库里面存储数据---开始
            console.log(data);
            $.ajax({
                url:"http://localhost:8888/hy-pay-project/updatePayProject",
                data:data.field,
                dataType:"json",
                type:"post",
                success:function(res){
                    if(res.code==0){
                        //关闭弹出层
                        layer.closeAll();
                        layer.msg("修改成功！");
                        //刷新table表格
                        table.reload("payProjectTable");
                        $("#updateForm").css("display","none");

                    }
                }
            });
            //发出ajax请求，往数据库里面存储数据---结束
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        //监听修改学生的提交按钮===结束

        //日期时间选择器
        laydate.render({
            elem: '#addDate'
            ,type: 'datetime'
        });

        laydate.render({
            elem: '#updateDate'
            ,type: 'datetime'
        });

    })



</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
</html>
